import React from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  FlatList, 
  TouchableOpacity,
  Image,
  SafeAreaView 
} from 'react-native';
import Card from '../components/Card';

// 模拟数据
const AI_CHARACTERS = [
  { id: '1', name: '小M', avatar: 'https://via.placeholder.com/60', desc: '友好的聊天伙伴' },
  { id: '2', name: '知识库', avatar: 'https://via.placeholder.com/60', desc: '回答您的各种问题' },
  { id: '3', name: '心理咨询师', avatar: 'https://via.placeholder.com/60', desc: '倾听您的心声' },
  { id: '4', name: '创意助手', avatar: 'https://via.placeholder.com/60', desc: '激发您的创造力' },
];

const RECENT_CHATS = [
  { id: '1', name: '小M', avatar: 'https://via.placeholder.com/50', lastMessage: '今天天气真好！', time: '10:30' },
  { id: '2', name: '知识库', avatar: 'https://via.placeholder.com/50', lastMessage: '关于您的问题，我找到了这些资料...', time: '昨天' },
];

interface HomeScreenProps {
  navigation?: any;
}

const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
  
  const handleAICharacterPress = (character: any) => {
    if (navigation) {
      navigation.navigate('Chat', { character });
    }
  };
  
  const handleChatPress = (chat: any) => {
    if (navigation) {
      navigation.navigate('Chat', { 
        character: AI_CHARACTERS.find(c => c.id === chat.id) 
      });
    }
  };

  const renderAICharacter = ({ item }: { item: any }) => (
    <TouchableOpacity 
      style={styles.aiCharacter}
      onPress={() => handleAICharacterPress(item)}
    >
      <Image 
        source={{ uri: item.avatar }} 
        style={styles.aiAvatar}
      />
      <Text style={styles.aiName}>{item.name}</Text>
      <Text style={styles.aiDesc}>{item.desc}</Text>
    </TouchableOpacity>
  );

  const renderChatItem = ({ item }: { item: any }) => (
    <TouchableOpacity 
      style={styles.chatItem}
      onPress={() => handleChatPress(item)}
    >
      <Image 
        source={{ uri: item.avatar }} 
        style={styles.chatAvatar}
      />
      <View style={styles.chatInfo}>
        <View style={styles.chatHeader}>
          <Text style={styles.chatName}>{item.name}</Text>
          <Text style={styles.chatTime}>{item.time}</Text>
        </View>
        <Text style={styles.chatMessage} numberOfLines={1}>
          {item.lastMessage}
        </Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>M2</Text>
        <TouchableOpacity style={styles.profileButton}>
          <Image 
            source={{ uri: 'https://via.placeholder.com/40' }} 
            style={styles.profileImage}
          />
        </TouchableOpacity>
      </View>

      <Card variant="elevated" style={styles.section}>
        <Text style={styles.sectionTitle}>AI角色</Text>
        <FlatList
          data={AI_CHARACTERS}
          renderItem={renderAICharacter}
          horizontal
          showsHorizontalScrollIndicator={false}
          keyExtractor={item => item.id}
          contentContainerStyle={styles.aiList}
        />
      </Card>

      <Card variant="elevated" style={styles.section}>
        <Text style={styles.sectionTitle}>最近聊天</Text>
        {RECENT_CHATS.length > 0 ? (
          <FlatList
            data={RECENT_CHATS}
            renderItem={renderChatItem}
            keyExtractor={item => item.id}
            scrollEnabled={false}
          />
        ) : (
          <Text style={styles.emptyText}>暂无聊天记录</Text>
        )}
      </Card>
      
      <View style={styles.navBar}>
        <TouchableOpacity style={[styles.navItem, styles.navItemActive]}>
          <Text style={styles.navText}>主页</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navText}>朋友圈</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.navItem}>
          <Text style={styles.navText}>我的</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#3498db',
  },
  profileButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    overflow: 'hidden',
  },
  profileImage: {
    width: '100%',
    height: '100%',
  },
  section: {
    marginHorizontal: 20,
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 16,
    color: '#333',
  },
  aiList: {
    paddingBottom: 8,
  },
  aiCharacter: {
    alignItems: 'center',
    marginRight: 20,
    width: 100,
  },
  aiAvatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginBottom: 8,
  },
  aiName: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 4,
  },
  aiDesc: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
  },
  chatItem: {
    flexDirection: 'row',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  chatAvatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 16,
  },
  chatInfo: {
    flex: 1,
    justifyContent: 'center',
  },
  chatHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 4,
  },
  chatName: {
    fontSize: 16,
    fontWeight: '500',
  },
  chatTime: {
    fontSize: 12,
    color: '#999',
  },
  chatMessage: {
    fontSize: 14,
    color: '#666',
  },
  emptyText: {
    textAlign: 'center',
    color: '#999',
    padding: 16,
  },
  navBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderTopWidth: 1,
    borderTopColor: '#eee',
    backgroundColor: '#fff',
  },
  navItem: {
    paddingVertical: 12,
    flex: 1,
    alignItems: 'center',
  },
  navItemActive: {
    borderTopWidth: 2,
    borderTopColor: '#3498db',
  },
  navText: {
    fontSize: 14,
    color: '#666',
  },
});

export default HomeScreen;